<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 网络来源图片 要是通过img标签显示 需要添加mate标签 -->
    <meta name="referrer" content="never" />

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="./css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/list.css" />
    <link rel="stylesheet" href="./css/pagination.css" />
    <style>
      h1{
        color: orangered
        }
      span{
        margin-left:150px;
        color: #F03726;
        
        }
      .breadcrumb {
        padding-left: 6px;
        padding-right: 6px;
      }

      /* 可以根据自己的需求设定需要的css样式 */
      .m-style {
        width: 700px;
        margin: 20px auto;
      }

      .m-style .prev {
        background: blue;
      }
      .m-style .next {
        background: blue;
      }

      .m-style .active {
        background: pink;
      }
    </style>
  </head>
  <body>
    <h1>京京易购</h1>
    <span>这里罗列了您喜欢的……</span>
    
<hr>
    
  <a href="#" ><span id='top'></span></a>
    <!-- 内容部分 -->
    <div class="container" style="margin-top: 80px;">
      <ul></ul>
    </div>
    <!-- 为了看的清楚 分页 写在上面了 -->
    <div class="box m-style"></div>


    <script src="./js/jquery.min.js"></script>
    <script src="./js/myAjax.js"></script>
    <script src="./js/tools.js"></script>
    <script src="./js/jquery.pagination.js"></script>

    <script>
      // 先设定参数

      // 默认 显示 第一页 内容
      let page = 1;
      // 默认 每页 显示 8 条数据
      let line = 8;
      // 获取浏览器地址栏数据对象
      let obj = myGetUrlValObj();
      // 使用 async 和 await 实现
      setPage();
      async function setPage() {
        // 向 后端程序发送 ajax请求
        const res = await myPromiseJQueryAjax(
          "./server/goods_list.php",
          "get",
          {
            cat_one_id: obj.cat_one_id,
            page: page,
            // 对象的简写语法,键名和键值的变量 名称相同 写一个就行了
            line,
          },
          "json"
        );
        console.log(res);
        // 根据 响应体结果 动态渲染生成 页面
        let str = "";
        res.data.forEach(function (item) {
          str += `
        <li class="list-item">
          <div class="panel panel-primary">
            <div class="panel-body">
              <ol class="breadcrumb">
                <li><a href="#">${item.cat_one_id}</a></li>
                <li><a href="#">${item.cat_two_id}</a></li>
                <li class="active">${item.cat_three_id}</li>
              </ol>
            </div>
            <div class="panel-footer">
              <div class="row">
                <div class="">
                  <div class="thumbnail">
                    <img src="${item.goods_big_logo}" alt="...">
                    <div class="caption">
                      <h3>${item.goods_name}</h3>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <p>
                        <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
                        <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        `;
        });

        $(".container ul").html(str);

        // 将 分页插件程序 直接定义在 响应体程序中
        // 分页插件功能
        $(".box").pagination({
          pageCount: res.sumPage, // 总页数
          totalData: res.row, // 数据总数量
          current: res.page, // 当前第几页
          showData: res.line, // 每页数据数量
          prevCls: "prev", // 上一页类名
          nextCls: "next", // 下一页类名
          prevContent: "上一页", // 上一页内容
          nextContent: "下一页", // 下一页内容
          activeCls: "active", // 选中页 class类名
          mode: "fixed", // 显示分页按钮 为 固定模式状态
          count: 4, // 分页按钮 显示的数量 不算 选中页 也就是 设定4 一共显示 5个按钮
          coping: true, // 显示 首页 末页
          homePage: "首页", // 设定首页内容
          endPage: "末页", // 设定末页内容
          isHide: true, // 总页数 为 0 或者 1 隐藏 分页控件
          keepShowPN: true, // 显示 上一页 下一页
          jump: true, // 开启 跳转
          callback: function (result) {
            // 执行的回调函数 必须要有一个参数
            // 参数.getCurrent() 获取分页插件 点击之后 对应的页数
            console.log(result.getCurrent());

            // 将结果 赋值给 page 变量 存储
            page = result.getCurrent();

          
            // 根据新的 page 数据 再次发送请求 动态渲染生成新的页面
            setPage();
            $('#top').trigger('click'); 
          },
        });
      }
    </script>


  </body>
</html>

